<template>
  <div class="canvas-tool">
    <div class="add-element-handler">
      <div class="right-handler">
        <IconMinus
          class="handler-item viewport-size"
          @click="scaleCanvas('-')"
          style="font-size: 30px;"
        />

        <IconPlus
          class="handler-item viewport-size"
          @click="scaleCanvas('+')"
          
          style="font-size: 30px;"
        />
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="适应屏幕">
          <div class="handler-item viewport-size-adaptation">
            <img
              src="../../../assets/1_1.png"
              style="width: 50px; height: 50px; margin: 0 5px"
              @click="resetCanvas()"
              
            />
          </div>
        </Tooltip>

      
      <div class="left-handler" style="cursor: pointer">
        <!-- ref="myImageg" -->
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="撤销">
          <div
            class="handler-item viewport-size-adaptation"
            @mousedown="disableMouse"
          >
            <div style="cursor: pointer">
              <img
                src="../../../assets/right.png"
                style="width: 25px; height: 25px; margin: 0 5px;cursor: pointer"
                :class="{ disable: !canUndo }"
                @click="undo()"
              />
            </div>
          </div>
        </Tooltip>
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="取消撤销">
          <!-- ref="myImagef" -->
          <div
            class="handler-item viewport-size-adaptation"
            @mousedown="disableMouseEventsdfg"
          >
            <img
              :class="{ disable: !canRedo }"
              style="width: 30px; height: 30px; margin: 0 5px; cursor: pointer"
              src="../../../assets/left.png"
              @click="redo()"
            />
          </div>
        </Tooltip>
      </div>
      <div style="cursor: pointer">
        <!-- ref="myImaged" -->
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="清空">
          <div
            class="handler-item viewport-size-adaptation"
            ref="myImaged"
            style="cursor: pointer"
            @mousedown="disableMouseEventsdf"
          >
            <img
              :class="{ disable: !canRedo }"
              style="width: 30px; height: 30px;cursor: pointer"
              src="../../../assets/opendelect.png"
              @click="deleteAllElements()"
            />
          </div>
        </Tooltip>
      </div>
      </div>
      <div style="margin:0 10px; display: flex;  ">
      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字">
        <div class="handler-item group-btn">
          <IconFontSize
            class="icon"
            :class="{ active: creatingElement?.type === 'text' }"
            @click="drawText()"
          style="font-size: 30px;"
          />
          <Popover trigger="click" v-model:visible="textTypeSelectVisible">
            <template #content>
              <div
                class="text-type-item"
                @click="
                  () => {
                    drawText();
                    textTypeSelectVisible = false;
                  }
                "
              >
                <IconTextRotationNone 
          style="font-size: 30px;" /> 横向文本框
              </div>
              <div
                class="text-type-item"
                @click="
                  () => {
                    drawText(true);
                    textTypeSelectVisible = false;
                  }
                "
              >
                <IconTextRotationDown 
          style="font-size: 30px;" /> 竖向文本框
              </div>
            </template>
            <IconDown class="arrow" />
          </Popover>
        </div>
      </Tooltip>
      <Popover trigger="click" v-model:visible="showoss">
        <template #content>
          <imgOss @close="showoss = false" @insert-image="toinsertimg"></imgOss>
        </template>
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
          <IconPicture 
          style="font-size: 30px;" class="handler-item" />
        </Tooltip>
      </Popover>
      <Popover trigger="click" v-model:visible="showossd">
        <template #content>
          <videoOss
            @close="showossd = false"
            @insertVideo="toinsertvideo"
          ></videoOss>
        </template>
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入视频">
          <IconVideoTwo 
          style="font-size: 30px;" class="handler-item"  />
        </Tooltip>
      </Popover>
      <Tooltip
        :mouseLeaveDelay="0"
        :mouseEnterDelay="0.5"
        title="HDMI IN"
        @click="HdmiClick"
      >
        <div class="handler-item">
          <img
            src="../../../assets/HDML.png"
            style="width: 30px; height: 30px; margin: 0 5px;cursor: pointer"
            ref="myImage"
          />
        </div>
      </Tooltip>


      
      <Tooltip
        :mouseLeaveDelay="0"
        :mouseEnterDelay="0.5"
        title="插入时间"
        @click="clickTime"
      >
        <div class="handler-item">
          <img
            src="../../../assets/time.png"
            style="width: 30px; height: 30px; margin: 0 5px;cursor: pointer"
            ref="myImages"
          />
        </div>
      </Tooltip>
      <Popover trigger="click" v-model:visible="showossds">
        <template #content>
          <audioOss
            @close="showossds = false"
            @insert-audio="toinsertAudio"
          ></audioOss>
        </template>
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入音频">
          <div style="cursor: pointer" class="handler-item">
            <img
              src="../../../assets/icon-music.png"
              ref="music"
              class="handler-item"
              style="width: 30px; height: 30px; margin: 0 5px;cursor: pointer"
            />
          </div>
        </Tooltip>
      </Popover>
      <Tooltip
        :mouseLeaveDelay="0"
        :mouseEnterDelay="0.5"
        title="插入天气"
        @click="mdfn"
      >
        <div class="handler-item">
          <img
            src="../../../assets/tian.png"
            ref="tian"
            style="width: 30px; height: 30px; margin: 0 5px;cursor: pointer"
          />
        </div>
      </Tooltip>
      <Popover trigger="click" v-model:visible="hides">
        <template #content>
          <pdfOss
            @close="hides = false"
            @insertPdf="
              (url) => {
                createPdfElement(url, { top: 80, left: 80 });
                hides = false;
              }
            "
          ></pdfOss>
        </template>
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文档">
          <div style="cursor: pointer" class="handler-item">
            <img
              src="../../../assets/text.png"
              class="handler-item"
              ref="text"
              style="width: 30px; height: 30px; margin: 0 5px"
            />
          </div>
        </Tooltip>
      </Popover>
      <Popover trigger="click" v-model:visible="shows">
        <template #content>
          <Webpage
            @close="shows = false"
            @insertWebpage="
              (src) => {
                createFrameElement(src, { top: 40, left: 40 });
                shows = false;
              }
            "
          ></Webpage>
        </template>
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入网页">
          <div style="cursor: pointer" class="handler-item">
            <img
              src="../../../assets/browser.png"
              ref="browser"
              style="width: 30px; height: 30px; margin: 0 5px"
            />
          </div>
        </Tooltip>
      </Popover>
    </div>

      
    </div>
    <Modal
      v-model:visible="latexEditorVisible"
      :footer="null"
      centered
      :width="880"
      destroyOnClose
    >
      <LaTeXEditor
        @close="latexEditorVisible = false"
        @update="
          (data) => {
            createLatexElement(data);
            latexEditorVisible = false;
          }
        "
      />
    </Modal>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { useMainStore, useSnapshotStore, useSlidesStore } from "@/store";
import { Slide } from "../../../types/slides.ts";
import { getImageDataURL } from "@/utils/image";
import { ShapePoolItem } from "@/configs/shapes";
import { LinePoolItem } from "@/configs/lines";
import useScaleCanvas from "@/hooks/useScaleCanvas";
import useHistorySnapshot from "@/hooks/useHistorySnapshot";
import useCreateElement from "@/hooks/useCreateElement";
import useSlideHandler from "@/hooks/useSlideHandler";
const { deleteSlide } = useSlideHandler();
import ShapePool from "./ShapePool.vue";
import LinePool from "./LinePool.vue";
import ChartPool from "./ChartPool.vue";
import TableGenerator from "./TableGenerator.vue";
import MediaInput from "./MediaInput.vue";
import imgOss from "./imgOss.vue";
import videoOss from "./videoOss.vue";
import audioOss from "./AudioOss.vue";
import useDeleteElement from "@/hooks/useDeleteElement";
import pdfOss from "./pdfOss.vue";
import Webpage from "./Webpage.vue";
import LaTeXEditor from "@/components/LaTeXEditor/index.vue";
import FileInput from "@/components/FileInput.vue";
import { SlideBackground } from "@/types/slides";

import { Tooltip, Popover, Modal } from "ant-design-vue";
import { weatherIp } from "@/api/facility";
const { deleteAllElements } = useDeleteElement();
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
var src = ref("");
const mainStore = useMainStore();
const { creatingElement } = storeToRefs(mainStore);
const { canUndo, canRedo } = storeToRefs(useSnapshotStore());
const { redo, undo } = useHistorySnapshot();
const {
  scaleCanvas,
  setCanvasScalePercentage,
  resetCanvas,
  canvasScalePercentage,
} = useScaleCanvas();

const canvasScalePresetList = [200, 150, 100, 80, 50];
const canvasScaleVisible = ref(false);

const applyCanvasPresetScale = (value: number) => {
  setCanvasScalePercentage(value);
  canvasScaleVisible.value = false;
};

const {
  createLunboElement,
  createImageElement,
  createChartElement,
  createTableElement,
  createLatexElement,
  createVideoElement,
  createAudioElement,
  createTextElement,
  createTimeElement,
  createWeatherElement,
  createFrameElement,
  createHdminElement,
  createPdfElement,
} = useCreateElement();

const insertImageElement = (files: FileList) => {
  const imageFile = files[0];
  if (!imageFile) return;
  getImageDataURL(imageFile).then((dataURL) =>
    createImageElement(dataURL, { top: 10, left: 10 })
  );
};
const shapePoolVisible = ref(false);
const linePoolVisible = ref(false);
const chartPoolVisible = ref(false);
const tableGeneratorVisible = ref(false);
const mediaInputVisible = ref(false);
const mediaInputVisibles = ref(false);
const latexEditorVisible = ref(false);
const textTypeSelectVisible = ref(false);
const showoss = ref(false);
const showossd = ref(false);
const showossds = ref(false);
const shows = ref(false);
const hides = ref(false);

// 绘制文字范围
const drawText = (vertical = false) => {
  createTextElement({ left: 0, top: 10, width: 100, height: 50 });

  // mainStore.setCreatingElement({
  //   type: "text",
  //   vertical,
  // });
};

// 绘制形状范围
const drawShape = (shape: ShapePoolItem) => {
  mainStore.setCreatingElement({
    type: "shape",
    data: shape,
  });
  shapePoolVisible.value = false;
};
// HDMIIN
const HdmiClick = () => {
  let urls =
    "";
  let backgroundcolor = "#2d8cf0";
  createHdminElement(
    { urls: `${urls}` },
    { backgroundcolor: `${backgroundcolor}` },
    { left: 50, top: 0 }
  );
};
// 绘制线条路径
const drawLine = (line: LinePoolItem) => {
  mainStore.setCreatingElement({
    type: "line",
    data: line,
  });
  linePoolVisible.value = false;
};

//插入图片
async function toinsertimg(data: any) {
  createLunboElement([data], { left: 30, top: 0 });
  showoss.value = false;
  // createElement
}
const toinsertPdf = () => {
  hides.value = false;
};
//插入视频
async function toinsertvideo(src: any, fileSize: any, name: any) {
  createVideoElement([src], fileSize, name, { left: 0, top: 10 });

  showossd.value = false;
  // createElement
}
const slidesStore = useSlidesStore();
const { slides } = storeToRefs(slidesStore);
// 插入音频
async function toinsertAudio(data: any, fileSize: any, name: any) {
  // const newAudio: SlideBackground = {
  //   GlobalMusic: [{ src: data, fileSize: fileSize, name: name }],
  // };
  var arr = [{ data, fileSize, name }];
  // if(Array.from(slidesStore?.slides[0]?.turningMode)){
  //     arr = [...slidesStore?.slides[0]?.turningMode,data]
  // }else{
  //     arr = [data]
  // }
  // if(slidesStore.slides[0].turningMode){
  //   arr = data
  // }else{
  //   // arr = [...slidesStore.slides[0].turningMode,data]
  // }
  if (slidesStore?.slides[0]?.turningMode) {
    arr = [...slidesStore?.slides[0]?.turningMode, { data, fileSize, name }];
    // console.log('111',arr);
  }
  slides.value.map((a, e) => {
    a.turningMode = arr;
  });

  // createAudioElement({
  //   src: `${data}`,
  //   fileSize: `${fileSize}`,
  //   name: `${name}`,
  // });

  showossds.value = false;
  // createElement
}

async function mdfn(params: any) {
  let result = await weatherIp();
  let { city, temperature, weather, humidity } = result.data.data;
  createWeatherElement(
    {
      left: 0,
      top: 0,
      width: 125,
      height: 60,
    },
    {
      city: `${city}`,
      temperature: `${temperature}°C`,
      humidity: `${humidity}%`,
      weather: `${weather}`,
    }
  );
}
async function clickTime(params: any) {
  createTimeElement(
    { left: 0, top: 0, width: 268, height: 30 },
    { content: mainStore.timeInfo }
  );
}
var myImage = ref();
var myImages = ref();
var myImaged = ref();
var myImagef = ref();
var myImageg = ref();
const disableMouseEvents = () => {
  if (myImage.value) {
    myImage.value.style.pointerEvents = "none";
  }
};
const disableMouseEventsd = () => {
  if (myImages.value) {
    myImages.value.style.pointerEvents = "none";
  }
};
const disableMouseEventsdf = (event: any) => {
  // event.stopPropagation(); // 取消事件传播
  event.preventDefault(); // 取消默认行为
};
const disableMouse = (event: any) => {
  event.preventDefault(); // 取消默认行为
};
const disableMouseEventsdfg = (event: any) => {
  event.preventDefault(); // 取消默认行为
};
var browser = ref();
const disableMouseEvenBroser = () => {
  if (browser.value) {
    browser.value.style.pointerEvents = "none";
  }
};
var text = ref();
const disableMouseEvenText = () => {
  if (text.value) {
    text.value.style.pointerEvents = "none";
  }
};
var tian = ref();
const disableMouseEvenTian = () => {
  if (tian.value) {
    tian.value.style.pointerEvents = "none";
  }
};
var music = ref();
const disableMouseEvenMusic = () => {
  if (music.value) {
    music.value.style.pointerEvents = "none";
  }
};
onMounted(() => {
  disableMouseEvenMusic();
  disableMouseEvenTian();
  disableMouseEvents();
  disableMouseEventsd();
  disableMouseEvenBroser();
  disableMouseEvenText();
});
</script>

<style lang="scss" scoped>
.canvas-tool {
  position: relative;
  border-bottom: 1px solid $borderColor;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 13px;
  user-select: none;
}
.left-handler {
  display: flex;
  align-items: center;
}
.add-element-handler {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38.6%, -50%);
  display: flex;
  align-items: center;
  .handler-item {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 2px;
    border-radius: $borderRadius;

    &:not(.group-btn):hover {
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      border-radius: 5px;
          width: 50px;
          height: 50px;
    }

    &.active {
      color: $themeColor;
    }

    &.group-btn {
      width: auto;
      margin-right: 4px;

      &:hover {
        background-color: #f3f3f3;
      }

      .icon,
      .arrow {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icon {
        width: 26px;
        padding: 0 2px;

        &:hover {
          background-color: #e9e9e9;
       
        }
        &.active {
          color: $themeColor;
        }
      }
      .arrow {
        font-size: 12px;

        &:hover {
          background-color: #e9e9e9;
        }
      }
    }
  }
}
.handler-item {
  margin: 0 10px;
  font-size: 14px;
  overflow: hidden;
  cursor: pointer;

  &.disable {
    opacity: 0.5;
  }
}
.right-handler {
  display: flex;
  align-items: center;
  margin: 0 30px;
  .text {
    width: 40px;
    text-align: center;
    cursor: pointer;
  }

  .viewport-size {
    font-size: 13px;
  }
}
.preset-item {
  padding: 8px 20px;
  text-align: center;
  cursor: pointer;

  &:hover {
    color: $themeColor;
  }
}
.text-type-item {
  padding: 5px 10px;
  cursor: pointer;

  &:hover {
    background-color: #f1f1f1;
  }

  & + .text-type-item {
    margin-top: 3px;
  }
}

@media screen and (max-width: 1024px) {
  .text {
    display: none;
  }
  .handler-item {
    margin: 0 5px;
  }
}
@media screen and (max-width: 1000px) {
  .left-handler,
  .right-handler {
    display: none;
  }
}
</style>
